import React, { useState, useEffect } from 'react'
import SetTabBar from '@/components/tabBar'
import HomeHeard from './component/HomeHeard/HomeHeard'
import { Checkbox, Ellipsis, Stepper, Button, Modal } from 'antd-mobile'
import { useDispatch, useSelector } from 'umi'
import '../cart/style.scss'
import { modifyCartItemNum } from '@a/cart'
export default function index() {
  const dispatch = useDispatch()
  const { items, total, number } = useSelector((state: { cart: any }) => state.cart);
  // 管理删除状态管理
  const [clickManger, setClickManger] = useState(false)
  // 修改购物车数量
  const modifyCartNumber = (key: string, number: number) => {
    dispatch({
      type: 'cart/modCartNumber',
      data: {
        key,
        number
      }
    })
  }
  // 购物车修改选中状态
  const modifyCartSelected = (key: string, selected: boolean) => {
    dispatch({
      type: 'cart/modCartSelected',
      data: {
        key,
        selected
      }
    })
  }
  // 点击全选修改所有商品选中状态
  const clickAllSeled = (selected: boolean) => {
    // 得到所有商品key
    const keys: any[] = []
    items.forEach((item: { key: any }) => {
      keys.push(item.key)
    })
    modifyCartSelected(keys.join(','), selected)
  }
  // 删除商品
  const [delKeys, setDelKeys] = useState([])
  const delCart = () => {
    // 得到需要删除所有商品key
    // 弹出确认框
    Modal.confirm({
      title: '删除',
      content: '此操作会彻底删除商品，确定删除吗'
    }).then(res => {
      dispatch({
        type: 'cart/delCartItems',
        data: {
          key: delKeys.join(',')
        }
      })
    })
  }
  // 定义选择状态
  const [clickSteled, setClickSteled] = useState(true)
  // 监听items 商品变化 得到全选状态
  useEffect(() => {
    // 选中状态根据使用商品是否为选中状态
    if (items.length !== 0) {
      setClickSteled(items.every((item: { selected: any }) => item.selected))
      // 获得被选中的key 作删除
      const keys: any[] = []
      items.forEach((item: { selected: any; key: any }) => {
        if (item.selected) {
          keys.push(item.key)
        }
      });
      setDelKeys(keys)
    }

  }, [items])
  // 获取购物车信息
  useEffect(() => {
    dispatch({
      type: 'cart/getItensInfo'
    })
  }, [])
  return (
    <div>
      <HomeHeard />
      <div className="cart-top">
        <div className="cart-top-left">
          商品数量: {number}
        </div>
        <div className="cart-top-rig"
          onClick={
            () => {
              setClickManger(!clickManger)
            }
          }
        >
          {
            clickManger ? '取消' : '管理'
          }
        </div>
      </div>
      <div className="cart-main">
        {
          items.map((item: any) => {
            return (
              <div className="cart-main-item" key={item.goodsId}>
                <Checkbox checked={item.selected} onChange={
                  (value) => {
                    modifyCartSelected(item.key, value)
                  }
                } />
                <img src={item.pic} alt="" />
                <div className="cart-main-itemIfo">
                  <Ellipsis direction='end' content={item.name} />
                  <div className="cart-main-itemIfo-type">
                    <p>数量</p>
                    <Stepper
                      defaultValue={item.number}
                      min={1}
                      onChange={value => {
                        modifyCartNumber(item.key, value)
                      }}
                    />
                  </div>
                  <p>￥{item.price}元</p>
                </div>
              </div>
            )
          })
        }
      </div>
      <div className="cart-bot">
        <div className="cart-bot-left">
          <Checkbox
            checked={clickSteled}
            onChange={
              (value) => {
                clickAllSeled(value)
              }
            }
          >全选</Checkbox>
          <div>合计：<span>￥{total}</span>.00</div>
        </div>
        {
          clickManger
            ?
            <Button color='danger'
              onClick={
                () => {
                  delCart()
                }
              }
            >删除订单</Button>
            :
            <Button color='danger'>提交订单</Button>
        }
      </div>
      <SetTabBar />
    </div>
  )
}
function modifyItemSelectedStatus(arg0: string, selected: boolean) {
  throw new Error('Function not implemented.')
}

